<!--
 * @Descripttion: 用户管理
 * @Author: YuZhenJing
 * @Date: 2020-01-05 21:14:35
 * @LastEditors: YuZhenJing
 * @LastEditTime: 2020-05-15 08:46:55
 -->
<template>
  <div class="user-list">
    <el-card body-style="padding:8px">
      <div style="margin-bottom: 10px;">
        <el-row :gutter="12">
          <el-col :span="3">
            <el-input clearable placeholder="账号名称" size="mini" v-model="searchParams.username"></el-input>
          </el-col>
          <el-col :span="3">
            <el-input clearable placeholder="用户名称" size="mini" v-model="searchParams.personName"></el-input>
          </el-col>
          <el-col :span="3">
            <el-select clearable placeholder="用户性别" size="mini" v-model="searchParams.userGender">
              <el-option
                :key="item.value"
                :label="item.name"
                :value="item.value"
                v-for="item in userGenderOptions"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="3">
            <el-select clearable placeholder="账户类型" size="mini" v-model="searchParams.accountType">
              <el-option
                :key="item.value"
                :label="item.name"
                :value="item.value"
                v-for="item in accountTypeOptions"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="3">
            <el-cascader
              :options="orgTreeData"
              :props="{ emitPath: false, checkStrictly: true }"
              :show-all-levels="false"
              clearable
              filterable
              placeholder="所属部门"
              size="mini"
              v-model="searchParams.orgCode"
            ></el-cascader>
          </el-col>
          <el-col :span="9" style="text-align: left">
            <el-button
              :loading="tableDataParam.loading"
              @click="request"
              icon="el-icon-search"
              size="mini"
              type="primary"
            >查询</el-button>
            <el-button
              @click="windowItem.userAdd.show = true"
              icon="el-icon-circle-plus-outline"
              size="mini"
              type="primary"
              v-if="$points.permission(auth.add)"
            >新增</el-button>
            <el-dropdown trigger="click" style="margin-left:10px" @command="handleBatch">
              <el-button size="mini" type="primary">
                批量...
                <i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="start" :disabled="!$points.permission(auth.statusStart)">
                  <i class="las la-grin-tongue-squint" style="color:#67C23A"></i>
                  启用
                </el-dropdown-item>
                <el-dropdown-item command="stop" :disabled="!$points.permission(auth.statusStop)">
                  <i class="las la-grin-tears" style="color:#E6A23C"></i>
                  停用
                </el-dropdown-item>
                <el-dropdown-item command="del" :disabled="!$points.permission(auth.del)">
                  <i class="el-icon-delete" style="color:#F56C6C"></i>
                  删除
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-row>
      </div>
      <tf-page
        :current-page="tableDataParam.paginationData.currentPage"
        :data="tableDataParam.data"
        :loading="tableDataParam.loading"
        :pageSize="tableDataParam.paginationData.pageSize"
        :sort-item="tableDataParam.paginationData.sortItem"
        :total="tableDataParam.paginationData.total"
        @doChangeCurrentPage="doChangeCurrentPage"
        @doChangePageSize="doChangePageSize"
        @selectedRow="selectedRow"
        @sortChange="sortChange"
      >
        <el-table-column align="center" type="selection" width="55"></el-table-column>
        <el-table-column label="账号名称" prop="user_name" sortable="custom">
          <template slot-scope="scope">
            <el-popover placement="right" popper-class="asm-body" trigger="hover" width="300">
              <el-card shadow="never">
                <el-row>
                  <el-col :span="6">
                    <div class="popover-content">用户名称:</div>
                  </el-col>
                  <el-col :span="18" class="ellipsis">
                    <div class="popover-content">
                      <span v-text="scope.row.personName"></span>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div class="popover-content">所属部门:</div>
                  </el-col>
                  <el-col :span="18" class="ellipsis">
                    <div class="popover-content">
                      <span v-text="scope.row.orgName"></span>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div class="popover-content">电子邮箱:</div>
                  </el-col>
                  <el-col :span="18" class="ellipsis">
                    <div class="popover-content">
                      <span v-text="scope.row.userEmail"></span>
                    </div>
                  </el-col>
                </el-row>
              </el-card>
              <span slot="reference">{{ scope.row.username }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="用户名称" prop="personName"></el-table-column>
        <el-table-column align="center" label="性别" prop="userGenderName" width="80"></el-table-column>
        <el-table-column align="center" label="手机号码" prop="userPhone"></el-table-column>
        <el-table-column align="center" label="帐户状态" prop="accountStatus" width="90"></el-table-column>
        <el-table-column align="center" label="帐户类别" prop="accountTypeName" width="120"></el-table-column>
        <el-table-column
          align="center"
          label="创建人"
          prop="creatorPersonName"
          v-if="userId == 'super'"
          width="120"
        ></el-table-column>
        <el-table-column align="center" label="操作" prop="userId" width="120">
          <template slot-scope="scope">
            <el-row>
              <el-col :span="6">
                <i
                  @click="userRole(scope.row)"
                  class="el-icon-s-operation"
                  style="color:blue;cursor:pointer"
                  v-if="$points.permission(auth.allocation)"
                ></i>
                <i
                  class="el-icon-s-operation"
                  style="color:rgb(123, 124, 125);
                  cursor:pointer"
                  v-else
                ></i>
              </el-col>
              <el-col :span="6">
                <i
                  @click="resetPwd(scope.row)"
                  class="las la-recycle"
                  style="color:red;cursor:pointer"
                  v-if="$points.permission(auth.resetPwd)"
                ></i>
                <i
                  class="las la-recycle"
                  style="color:rgb(123, 124, 125);
                  cursor:pointer"
                  v-else
                ></i>
              </el-col>
              <el-col :span="6">
                <i
                  @click="edit(scope.row)"
                  class="el-icon-edit"
                  style="color:green;cursor:pointer"
                  v-if="$points.permission(auth.edit)"
                ></i>
                <i
                  class="el-icon-edit"
                  style="color:rgb(123, 124, 125);
                  cursor:pointer"
                  v-else
                ></i>
              </el-col>
              <el-col :span="6">
                <i
                  @click="singleDel(scope.row)"
                  class="el-icon-delete"
                  style="color:red;cursor:pointer"
                  v-if="$points.permission(auth.del)"
                ></i>
                <i
                  class="el-icon-delete"
                  style="color:rgb(123, 124, 125);
                  cursor:pointer"
                  v-else
                ></i>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
      </tf-page>
    </el-card>
    <!--新增用户-->
    <user-add
      :accountStatusOptions="accountStatusOptions"
      :accountTypeOptions="accountTypeOptions"
      :orgTreeData="orgTreeData"
      :userGenderOptions="userGenderOptions"
      :userGroupList="userGroupList"
      :visible.sync="windowItem.userAdd.show"
      @request="request"
    ></user-add>
    <!--编辑用户-->
    <user-edit
      :accountStatusOptions="accountStatusOptions"
      :accountTypeOptions="accountTypeOptions"
      :orgTreeData="orgTreeData"
      :userGenderOptions="userGenderOptions"
      :userGroupList="userGroupList"
      :userId="windowItem.userEdit.userId"
      :visible.sync="windowItem.userEdit.show"
      @request="request"
    ></user-edit>
    <user-role ref="userRoleRef"></user-role>
  </div>
</template>
<script>
import * as userService from '@/service/user'
import { getOrgTreeData } from '@/service/org'
export default {
  components: {
    'tf-page': require('@/components/common/page/TfPage').default,
    'user-add': require('@/components/module/user/UserAdd').default,
    'user-edit': require('@/components/module/user/UserEdit').default,
    'user-role': require('@/components/module/user/UserRole').default
  },
  data() {
    return {
      userId: '',
      // 窗体相关参数
      windowItem: {
        userAdd: {
          show: false
        },
        userEdit: {
          show: false,
          userId: ''
        }
      },
      // 用户性别数据集
      userGenderOptions: [],
      // 账户类别数据集
      accountTypeOptions: [],
      // 账户状态数据集
      accountStatusOptions: [],
      // 用户分组数据集
      userGroupList: [],
      // 部门树数据集
      orgTreeData: [],
      //查询项对象
      searchParams: {},
      //分页表格相关参数
      tableDataParam: {
        loading: false,
        data: [],
        selectedData: [],
        paginationData: {
          total: 0,
          currentPage: 1,
          pageSize: 10,
          sortItem: {
            prop: 'u.creator_date',
            order: 'descending'
          }
        }
      },
      auth: {
        list: 'YHLBCX',
        del: 'SCYH',
        allocation: 'YHFPJS',
        edit: 'BJYH',
        add: 'YHXZ',
        statusStop: 'YHZTTY',
        statusStart: 'YHZTQY',
        resetPwd: 'YHCZMM'
      }
    }
  },
  methods: {
    ...userService,
    getOrgTreeData,
    // 初始化过滤项
    initFilter() {
      return {
        username: '',
        personName: '',
        userGender: '',
        accountType: '',
        orgCode: ''
      }
    },
    // 排序
    sortChange(sortItem) {
      this.tableDataParam.paginationData.sortItem = {
        prop: sortItem.prop,
        order: sortItem.order
      }
      this.request()
    },
    // 选择下拉框页码
    doChangePageSize(pageSize) {
      this.tableDataParam.paginationData.pageSize = pageSize
      this.request()
    },
    // 更改页码
    doChangeCurrentPage(currPage) {
      this.tableDataParam.paginationData.currentPage = currPage
      this.request()
    },
    // 选择行
    selectedRow(selection) {
      this.tableDataParam.selectedData = selection
    }
  },
  mounted() {
    if (this.$points.permission(this.auth.list)) {
      const userInfo = this.$auth.userInfo.get()
      if (userInfo) {
        this.userId = userInfo.userId
      }
      this.searchUserGenderOptions()
      this.searchAccountTypeOptions()
      this.searchAccountStatusOptions()
      this.searchUserGroupOptions()
      this.getOrgTreeData()
      this.searchParams = this.initFilter()
      this.request()
    } else {
      this.$router.push({ path: '/403' })
    }
  }
}
</script>
<style lang="stylus" scope>
.popover-content
  height 32px
  line-height 32px
</style>
